<template>
	<view>
		<swiper :autoplay="autoplay" class="guideSwiper" :current="setp" :circular="circular" :indicator-dots="indicatordots" >
			<swiper-item>
				<view class="guide-item">
					<view>
						<view class="center">
							<view>
								<view class="guide-item_index">
									HOW TO EARN AIRDROP
								</view>
								<view class="guide-itme-title">Play game & earn points</view>
								<view class="guide-item-bot"></view>
							</view>
						</view>
						<view class="guide-item-bot-img">
							<image src="../../../static/img/Dawg + Doge playing video games_Blue&Red_clear bg.png"></image>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="guide-item">
					<view>
						<view class="center">
							<view>
								<view class="guide-item_index">
									HOW TO EARN AIRDROP
								</view>
								<view class="guide-itme-title" style="width:310px;">Complete missions and check in daily</view>
								<view class="guide-item-giy" >
									<image style="width: 279px;height: 379px;" mode="widthFix" src="../../../static/img/Group 9101.png"></image>
									<view style="position: absolute;color: #fff; top: 49%;right: 25%;font-size: 12px;">Follow on X</view>
									<view style="display: flex;align-items: center;  position: absolute;top: 20%; background: #0A395E;width: 232px;height: 65px;border-radius: 10px;">
										<view>
											<image src="../../../static/img/Telegram.png" style="margin-left: 18px;margin-top: -0px; width: 36px;height: 36px;"></image>
										</view>
										<view style="width: 190px;font-size: 12px;">Join $DAWG Telegram</view>
									</view>
									<view style="display: flex;align-items: center; left: 7%;  position: absolute;top: 64.5%; background: #0A395E;width: 210px;height: 65px;border-radius: 10px;">
										<view>
											<image src="../../../static/img/Telegram.png" style="margin-left: 18px;margin-top: -0px; width: 36px;height: 36px;"></image>
										</view>
										<view style="width: 130px;font-size: 12px;">Daily Check-in</view>
									</view>
								</view>
							</view>
						</view>    
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="guide-item">
					<view>
						<view class="center">
							<view>
								<view class="guide-item_index">
									HOW TO EARN AIRDROP
								</view>
								<view class="guide-itme-title" style="width:340px;font-size: 24px;">Share and earn extra % of your friends’ points</view>
							    <view>
									<view style="float: right; margin-top: 30px;margin-right: 50px; background: #0A395E;width: 160px;border-radius: 10px; font-size: 12px; height: 48px;color: #fff;" class="center">
										Join the $DAWG pack
									</view>
									<image src="../../../static/img/Dawg + Wojak at gym_white coloured_clear bg.png" style="width: 342px;height: 342px;" mode="widthFix"></image>
								</view>
							</view>
						</view>    
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="guide-item">
					<view>
						<view class="center">
							<view>
								<view class="guide-item_index">
									HOW TO EARN AIRDROP
								</view>
								<view class="guide-itme-title" style="width:340px;font-size: 24px;">Add wallet address to receive airdrop</view>
							    <view style="position: relative;">
									<!-- <view style="position: absolute; top: 80px;left: 20%;box-sizing:border-box; background: linear-gradient(180deg, rgba(193, 227, 255, 0.4) 43.21%, rgba(249, 245, 190, 0.4) 172.84%); width: 229px;height: 281px;border-radius: 50%;"></view> -->
									<image src="../../../static/img/Group 9102.png" style="width: 365px;height: 396px;margin-top: 40px;" mode="widthFix"></image>
								</view>
							</view>
						</view>    
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props:{
			setp:{
				type:Number,
				default:0
			}
		},
		data(){
			return {
				autoplay:false,
				circular:false,
				indicatordots:false
			}
		},
		methods:{
			
		}
	}
</script>

<style>
	@import url('../guide.scss');
</style>